import { Component } from 'react';

import { Group, Boxs, Tab, SearchBar, ScrollList, Toast } from 'saltui';
const { HBox, Box } = Boxs;
import AngleRight from 'salt-icon/lib/AngleRight';
import MyTabBar from 'components/tab_bar';
import DB from '../../../app/db';
import { URLS,nodataIcon } from '../../../app/variables';

import './PageHome.less';

const currentItem={activeItem: "0", flag: false};

     const Item2  =  React.createClass({

          detailsClick: function(event) {
            let t = this;
            DB.SomeModuleAPI.memoIsExist({id:t.props.data.id}).then((content) => {
              if(content == 'notExist'){
                Toast.show({
                    type: 'error',
                    content: '当前数据已删除',
                });
                t.props.refreshList();
              }else{
                currentItem.flag = true;
                location.hash = 'meeting/meetingMemo/' + t.props.data.applyRecordId + '/' + t.props.data.id+ '/viewList';
              }
            }).catch((error) => {
            });
          },
          render:function() {
              let address = this.props.data.address;
               return(<div>
                 <HBox className="t-BCf t-P16 t-PR12 dd-bottom-border" onClick={this.detailsClick}>
                  <Box flex={1}>
                    <div className="t-omit t-FC3 t-FS16 t-LH1_3 t-MR8">
                      {this.props.data.name}
                    </div>
                    <HBox className="t-FCddfontblue-40 t-LH1_3 t-PT8 t-FS14" vAlign="center">
                      <i className="iconfont icon-time t-MR4 t-FS14"></i>
                      <span className="t-omit">{this.props.startDate}~{this.props.endDate}</span>
                    </HBox>
                    <HBox className="t-FCddfontblue-40 t-LH1_3 t-PT6 t-FS14" vAlign="center">
                      <i className="iconfont icon-place t-MR4 t-FS14"></i>
                      <span className="t-omit">{address == null || address == "" ? "无" : address}</span>
                    </HBox>
                  </Box>
                  <Box>
                    <AngleRight width={20} fill="#ccc" className="demo-t-list-arrow" />
                  </Box>
                </HBox> 
            </div>)
          }
     });


export default class PageHome extends Component {


 constructor(props) {
    super(props);

   //修改待办列表页tab默认值
   document.getElementById("sendTabIndex").value = "0";
    //关闭加载页的遮罩效果
    $(".loading-containter").hide();
    //禁用ios弹性事件
    dd.ui.webViewBounce.disable();
    //是否需要底部tab页
    var hasBottomTab =  document.getElementById("hasBottomTab").value;
    var winHeight = getScrollHigh(1, 1, hasBottomTab);
    var activeItem = '0';
    if(currentItem.flag){
      activeItem = currentItem.activeItem;
    }
    currentItem.flag = false;
    
    this.state = {
      userId: '1',
      search0:'',
      noDataTip0:'暂无数据',
      search1:'',
      noDataTip1:'暂无数据',
      activeTabIndex:'0',
      activeIndex: 0,
      n: 1,
      list: [0, 1, 2, 3, 4, 5, 6],
      winHeight:winHeight,
      activeItem: activeItem,
      hasBottomTab: hasBottomTab
    };

   let t = this;
    let userId = document.getElementById("userHiddenId").value;
    var isHelpNew = 1;
    dd.util.domainStorage.getItem({ //帮助按钮
       name:'meeting_helpNew_'+userId , // 存储信息的key值
       onSuccess : function(info) {
            var helpNew = info.value;
            if( typeof(helpNew) == 'undefined' || helpNew == '' ){
              isHelpNew = 2;
            }
            //初始化按钮
            t.initButton(isHelpNew);
       },
       onFail : function(err) {
            //alert(JSON.stringify(err));
       }
    });
  }

  //初始化按钮
  initButton(isHelpNew){
    //设置帮助
    /*dd.biz.navigation.setIcon({
        showIcon : true,//是否显示icon
        iconIndex : isHelpNew,//显示的iconIndex,如上图
        onSuccess : function(result) {
            location.hash='help/help_index';
        },
        onFail : function(err) {
        //jsapi调用失败将会回调此函数
        }
    });*/
  }

  componentDidMount(){
    var page_title = "会议";
    $("title").text(page_title);
    var thirdMenuType = getLoginUserInfo().thirdMenuType;
    if(thirdMenuType == 'DING'){
      dd.biz.navigation.setTitle({
        title : page_title,//控制标题文本，空字符串表示显示默认文本
        onSuccess : function(result) {},
        onFail : function(err) {}
      });
    }else if(thirdMenuType =='MH'){
      !!emp&&emp.window.setTitle({
        title: {
            text: page_title,
            icon: '',
            actionmenu: {}
        },
      });
    }
    searchBarLimit(20);
  }

  // 请求参数
  beforeFetch0(type,data,from){
    if (from.title == undefined) {
      data.condition = this.state.search0;
    } else {
      data.condition = from.title;
    }
    data.type = type;
    data.userId = this.state.userId;
    return data;
  }

  // 请求参数
  beforeFetch1(type,data,from){
    if (from.title == undefined) {
      data.condition = this.state.search1;
    } else {
      data.condition = from.title;
    }
    data.type = type;
    data.userId = this.state.userId;
    return data;
  }

  // 首页返回数据参数
  processData(data){
    return data;
  }

   //搜索
   onSearch(type,keyword) {
      if (type == 0) {
        this.setState({
          search0:keyword,
          noDataTip0:'无搜索结果'
        });
        this.refs.meeting_unread_ref.fetchData({title:keyword,type:'0'});
      } else if (type == 1) {
        this.setState({
          search1:keyword,
          noDataTip1:'无搜索结果'
        });
        this.refs.meeting_read_ref.fetchData({title:keyword,type:'1'});
      }
   }

  //退出
  onExit(type,keyword){
    if (type == 0) {
      this.setState({
        search0:'',
        noDataTip0:'暂无数据'
      });
      this.refs.meeting_unread_ref.fetchData({title:'',type:'0'});
    } else if (type == 1) {
      this.setState({
        search1:'',
        noDataTip1:'暂无数据'
      });
      this.refs.meeting_read_ref.fetchData({title:'',type:'1'});
    }
  }

  fetchData(param){
    this.refs.meeting_unread_ref.fetchData({title:'',type:'0'});
    this.refs.meeting_read_ref.fetchData({title:'',type:'1'});
  }

  //顶部TAB切换
  changeTab(activeTabIndex){
    var active = activeTabIndex.active;
    this.setState({
      activeTabIndex:active,
      page:0
    });
  }

  handleChange(obj) {
    this.setState({activeItem: obj.active});
    currentItem.activeItem = obj.active;
    searchBarLimit(20);
  }

  render() {
    const onChange = (activeIndex) => {
      // 这里是触发每个item之后的回调，会返回当前点击的item的index 值
      console.log(activeIndex);
      this.setState({ activeIndex:activeIndex });
    };

    const t = this;
    let listHeight ={height: this.state.winHeight};
    return (
        <div>
          <div className="my-memo">
            <Tab
              activeKey={this.state.activeItem}
              onChange={this.handleChange.bind(this)} 
              showScroll
            >
            <Tab.Item title="未读" key="0">
                <SearchBar hasHistory={false} instantSearch={false} onSearch={this.onSearch.bind(this,0)}  ref='unread_search' placeholder='请输入会议名称' onExit={this.onExit.bind(this,0)}>
                </SearchBar>
                 <div style={listHeight}>
                    <ScrollList
                      className="page-list t-PB30"
                      url={URLS.memoInfoList}
                      dataType="json"
                      pageSize={10}
                      beforeFetch={this.beforeFetch0.bind(this,'0')}
                      noDataTip={this.state.noDataTip0}
                      processData={(data) => data}
                      ref = 'meeting_unread_ref'
                      noDataImage={nodataIcon}
                      currentPageKey="page"
                    >
                    <Item2 type="0" refreshList={this.fetchData.bind(this)}/>
                    </ScrollList>
                </div>

            </Tab.Item>
            <Tab.Item title="已读" key="1">
                <SearchBar hasHistory={false} instantSearch={false} onSearch={this.onSearch.bind(this,1)}  ref='read_search' placeholder='请输入会议名称' onExit={this.onExit.bind(this,1)}>
                </SearchBar>
                 <div  style={listHeight}>
                    <ScrollList
                      className="page-list t-PB30"
                      url={URLS.memoInfoList}
                      dataType="json"
                      pageSize={10}
                      beforeFetch={this.beforeFetch1.bind(this,'1')}
                      noDataTip={this.state.noDataTip1}
                      processData={(data) => data}
                      ref = 'meeting_read_ref'
                      noDataImage={nodataIcon}
                      currentPageKey="page"
                    >
                    <Item2 type="1" refreshList={this.fetchData.bind(this)}/>
                    </ScrollList>
                </div>
            </Tab.Item>
          </Tab>
          </div>
          <MyTabBar activeIndex={3} />
        </div>);
  }
}


